
class LayuiPage {
    constructor(ulId,buttonId,pageSize,fontSize) {
        this.ulId = ulId;//主页面 需要传选择器类别
        this.buttonId = buttonId;//下面按钮 需要传选择器类别
        this.fontSize = fontSize;//字体大小
        this.pageSize =pageSize;//每页数量

        this.total = 0;//总共页
        this.index = 1;//当前页
        this.onclickListener();
        this.init();
    }
    //初始化函数
    init(){
        var items = new Array();
        var ul = $(this.ulId);
        console.log("item:"+this.ulId);
        console.log(ul);
        ul.children().each(function () {
            items.push(this);
        });
        this.items = items;//保存所有mian里面的内容
        this.total = Math.ceil(this.items.length/this.pageSize);//向上取整
        //this.total = 20;
        console.log("total:"+this.total);

        this.showButtonPage();
        this.showMainPage();
    }
    //更新主要内容
    showMainPage(){
        if (this.items.length == 0){
            return ;
        }
        var main = $(this.ulId);
        main.html("");
        var num = this.pageSize;
        // 10 3  4   4  3
        if (this.total == this.index){
            num = this.items.length - ((this.index - 1) * this.pageSize);
        }
        var html = "";
        for (var i = 0;i<num ;i++ ){
			var aa = $(this.items[(this.index - 1) * this.pageSize + i ]);
            //console.log(aa)
            html += aa[0].outerHTML;

        }
        main.html(html);

    }
    //更新下面分页
    showButtonPage(){
        var button = $(this.buttonId);
        button.html("");
        //layui-disabled
        var prevDisabled = "";
        var prev = this.index - 1;
        if (this.index == 1){
            prevDisabled = " layui-disabled ";
            prev = prev + 1;
        }
        var nextDisabled = "";
        var next = this.index + 1;
        if (this.index == this.total){
            nextDisabled = " layui-disabled ";
            next = next - 1;
        }

        /*

         <div>
            <div class="layui-box layui-laypage layui-laypage-default" id="layuiPage">
                <a href="javascript:;" class="layui-laypage-prev  layui-disabled " page="1">上一页</a>
                <span class="layui-laypage-curr">
                    <em class="layui-laypage-em"></em>
                    <em>1</em>
                </span>
                <a href="javascript:;" page="2">2</a>
                <a href="javascript:;" page="3">3</a>
                <span class="layui-laypage-spr">…</span>
                <a href="javascript:;" class="layui-laypage-last" title="尾页" page="5">5</a>
                <a href="javascript:;" class="layui-laypage-next " page="2">下一页</a>
            </div>
        </div>

        */
        //头部信息
        var html = "<div><div class=\"layui-box layui-laypage layui-laypage-default\" id=\"layuiPage\">";
        //上一页
        html += "<a href=\"javascript:;\" class=\"layui-laypage-prev "+prevDisabled+"\" page=\""+prev+"\">上一页</a>";
        //处理当前页前面的
        if (this.index - 1 < 4){//前面页面不足 不需要省略
            for (var i = 1;i<this.index;i++){
                html += "<a href=\"javascript:;\" page=\""+i+"\">"+i+"</a>";
            }
        }else {//需要省略
            //第一页
            html += "<a href=\"javascript:;\" class=\"layui-laypage-first\" page=\"1\" title=\"首页\">1</a>";
            //省略
            html += "<span class=\"layui-laypage-spr\">…</span>";
            //当前页前面两个
            for (var i = this.index - 2;i<this.index;i++){
                html += "<a href=\"javascript:;\" page=\""+i+"\">"+i+"</a>";
            }
        }

        //当前页
        html += "<span class=\"layui-laypage-curr\"><em class=\"layui-laypage-em\"></em><em>"+this.index+"</em></span>";


        //处理后面的
        if (this.total - this.index < 4){// 不足 不需要省略
            for (var i = this.index + 1;i<=this.total;i++){
                html += "<a href=\"javascript:;\" page=\""+i+"\">"+i+"</a>";
            }
        }else {//需要省略
            //当前页后面两个
            for (var i = this.index+1;i<this.index+3;i++){
                html += "<a href=\"javascript:;\" page=\""+i+"\">"+i+"</a>";
            }
            //省略号
            html += "<span class=\"layui-laypage-spr\">…</span>";
            //尾页
            html += "<a href=\"javascript:;\" class=\"layui-laypage-last\" title=\"尾页\" page=\""+this.total+"\">"+this.total+"</a>";
        }
        //下一页
        html += "<a href=\"javascript:;\" class=\"layui-laypage-next "+nextDisabled+"\" page=\""+next+"\">下一页</a>";
        //尾部信息
        html += "</div></div>";

        //设置到页面
        button.html(html);


    }

    getIndex(){
        return this.index;
    }

    //设置具体页数
    setIndex(index){
        if (this.items.length ==0){
            return ;
        }
        this.index = parseInt(index);
        this.showButtonPage();
        this.showMainPage();
    }

    onclickListener(){
        var thisclass = this;
        $(document).on("click",thisclass.buttonId+" a",function () {
            var num = $(this).attr("page");
            console.log("page:"+num+".");
            thisclass.setIndex(num);
        });
    }
    //传入要被删除的item 的id
    deleteItem(id){
        for (var i= 0;i<this.items.length;i++){
            //console.log($(this.items[i]).attr('id')+":11");
            //console.log(id+":22");
            if ($(this.items[i]).attr('id') == id){

                var aa = $(this.items[i]);
                var ret = aa[0].outerHTML;

                this.items.splice(i, 1);
                this.total = Math.ceil(this.items.length/this.pageSize);//向上取整
                if (this.index > this.total){
                    this.index -= 1;
                }
                this.showButtonPage();
                this.showMainPage();
                return ret;
            }
        }
    }

    addItem(item){
        var m_tiem = $(item);
        this.items.push(m_tiem);
        this.total = Math.ceil(this.items.length/this.pageSize);//向上取整
        this.setIndex(this.index);
    }

    haveItem(id){
        for (var i= 0;i<this.items.length;i++){
            if ($(this.items[i]).attr('id') == id){
                return true;
            }
        }
        return false;
    }

}

